<template>
<el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    label-width="auto"
    class="demo-ruleForm"
    status-icon
  >
   <el-form-item label="业务单号：" prop="settlementChargeNumber">
      <el-input v-model="ruleForm.settlementChargeNumber" />
    </el-form-item>
    <el-form-item label="货主单位：" prop="settlementChargeConsignorUnit">
      <el-input v-model="ruleForm.settlementChargeConsignorUnit" />
    </el-form-item>
  <el-form-item label=" 结算方式：" prop="settlementChargeBillingmethod">
      <!-- <el-input v-model="ruleForm.settlementChargeBillingmethod" /> -->
      <el-radio-group v-model="ruleForm.settlementChargeBillingmethod">
        <el-radio :label="0">微信支付</el-radio>
        <el-radio :label="10">支付宝支付</el-radio>
        <el-radio :label="20">银联支付</el-radio>
        <el-radio :label="30">企业转账</el-radio>
        <el-radio :label="40">线下支付</el-radio>
        <el-radio :label="50">其它</el-radio>
      </el-radio-group>
      <!-- 文本框当我输入的时候更上面的值不起冲突 -->
       <!-- <el-input @click="handleChange" v-model="ruleForm.settlementChargeBillingmethod" /> -->
    </el-form-item>
    <el-form-item label="吨位（立方米）：" prop="settlementChargeTonnage">
      <el-input v-model="ruleForm.settlementChargeTonnage" />
    </el-form-item>
    <el-form-item label="单价（元/立方米）：" prop="settlementChargeUnit">
      <el-input v-model="ruleForm.settlementChargeUnit" />
    </el-form-item>
    <el-form-item label="金  额：" prop="settlementChargeMoney">
      <el-input v-model="ruleForm.settlementChargeMoney" />
    </el-form-item>
    <el-form-item label="业务日期：" prop="settlementChargeDateBusiness">
          <el-date-picker
            v-model="ruleForm.settlementChargeDateBusiness"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
    </el-form-item>
    <el-form-item label="经办人：" prop="settlementChargeAttn">
      <el-input v-model="ruleForm.settlementChargeAttn" />
    </el-form-item>
    <el-form-item label="备  注：" prop="settlementRemark">
      <!-- <el-input v-model="ruleForm.settlementChargeCheckName" />多行文本 -->
      <el-input v-model="ruleForm.settlementRemark" type="textarea" />
    </el-form-item>
      <el-button type="primary" @click="submitForm">
        修改
      </el-button>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMenuItem, type ComponentSize, type FormInstance, type FormRules,ElMessage } from 'element-plus'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import http from '@/Http';

const route = useRoute();
const router = useRouter();
const ruleForm = reactive({
  settlementChargeId:route.query.settlementChargeId,
  settlementChargeNumber: '',
  settlementChargeConsignorUnit: '',
  settlementChargeOutsourcingUnit: '',
  settlementChargeBillingmethod: '',
  // settlementChargeBillingmethods: '',
  settlementChargeTonnage: '',
  settlementChargeUnit: '',
  settlementChargeMoney: '',
  settlementChargeDateBusiness: '',
  settlementChargeAttn: '',
  settlementChargeCheckName: '',
  settlementRemark: '',
  createNames: "",
  createDates: "",
  settlementStatus: "",
})
// alert(ruleForm.settlementChargeId);
const getFindFeesPayable = () => {
  axios.get("Settlementwrite/api/SettlementCharges/GetById", {
    params: {
      settlementChargeId: ruleForm.settlementChargeId
    }
  })
    .then(res => {
      ruleForm.settlementChargeId=res.data.data.settlementChargeId;
      ruleForm.settlementChargeNumber = res.data.data.settlementChargeNumber;
      ruleForm.settlementChargeConsignorUnit = res.data.data.settlementChargeConsignorUnit;
      ruleForm.settlementChargeOutsourcingUnit = res.data.data.settlementChargeOutsourcingUnit;
      ruleForm.settlementChargeBillingmethod = res.data.data.settlementChargeBillingmethod;
      ruleForm.settlementChargeTonnage = res.data.data.settlementChargeTonnage;
      ruleForm.settlementChargeUnit = res.data.data.settlementChargeUnit;
      ruleForm.settlementChargeMoney = res.data.data.settlementChargeMoney;
      ruleForm.settlementChargeDateBusiness = res.data.data.settlementChargeDateBusiness;
      ruleForm.settlementChargeAttn = res.data.data.settlementChargeAttn;
      ruleForm.settlementChargeCheckName = res.data.data.settlementChargeCheckName;
      ruleForm.settlementRemark = res.data.data.settlementRemark;
      ruleForm.createNames = res.data.data.createNames;
      ruleForm.createDates = res.data.data.createDates;
      ruleForm.settlementStatus = res.data.data.settlementStatus;
  })
}

const submitForm = async () => {
      axios.post("Settlementwrite/api/SettlementCharges/Update", ruleForm)
        .then(res => {
          if (res.data.data > 0) {
            ElMessage.success('修改成功')
            router.push('/SettlementList')
          } else {
             ElMessage.success('修改失败')
          }
  })
}


onMounted(() => {
  getFindFeesPayable();
})
</script>
<style>
select {
    width: 200px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>

<style>
.page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.demo-ruleForm {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
    margin-bottom: 20px;
}

.el-input,
.el-select,
.el-date-editor {
    width: 100%;
}

.el-button {
    margin-right: 10px;
}
</style>